// src/pages/personal/index.tsx
import styles from "@styles/personal.module.scss";
import { Helmet } from "react-helmet";
import { EditSOutline, RightOutline } from "antd-mobile-icons";
import {useRequestProfileQuery} from "@store/apiSlice/profileApiSlice";
import {useEffect, useRef} from "react";
import {ToastHandler} from "antd-mobile/es/components/toast";
import {SpinLoading, Swiper, Toast} from "antd-mobile";
import Image from "@shared/Image";
import classNames from "classnames";
import useLoading from "@hooks/useLoading";
import Logout from "@pages/personal/widgets/logout";
import {useNavigate} from "react-router-dom";

export default function Personal() {
    // 发送请求获取登录用户个人资料
    const { data, isLoading, isSuccess } = useRequestProfileQuery(undefined);
    // 用于保存加载中提示的引用对象
    const toastHandler = useRef<ToastHandler>();
    // 获取用于页面跳转的方法
    const navigate = useNavigate();
    //监控是否正在获取用户个人资料
    useEffect(()=>{
        //如果正在获取
        if(isLoading){
            //弹出"加载中"的用户提示并保存其引用对象
            toastHandler.current = Toast.show({
                content:<SpinLoading/>,
                duration:0,
            })
        }
    },[isLoading])
    // 监控获取用户个人资料是否成功
    useEffect(() => {
        // 如果成功, 关闭"加载中"的用户提示
        if (isSuccess) toastHandler.current?.close();
        // 如果组件卸载
        return () => {
            // 关闭"加载中"的用户提示
            toastHandler.current?.close();
        };
    }, [isSuccess]);
    // 加载提示
    useLoading(isLoading, isSuccess);
    return (

        <>

            <Helmet>
                <title>优医问诊-个人中心</title>
            </Helmet>
            {isSuccess && ( <div className={styles.page}>
                <div className={styles.summary}>
                    <div className={styles.user}>
                        <div className={styles.avatar}>
                            <Image url={data.data.avatar} alt="" />
                        </div>
                        <div className={styles.name}>
                            <span>用户907456</span>
                            <EditSOutline />
                        </div>
                    </div>

                    <ul className={styles.statistics}>
                        <li>
                            <span>{data.data.collectionNumber}</span>
                            <span>收藏</span>
                        </li>
                        <li>
                            <span>{data.data.likeNumber}</span>
                            <span>关注</span>
                        </li>
                        <li>
                            <span>{data.data.score}</span>
                            <span>积分</span>
                        </li>
                        <li>
                            <span>{data.data.couponNumber}</span>
                            <span>优惠券</span>
                        </li>
                    </ul>
                </div>
                <div className={styles.inquiring}>
                    <h5>问诊中</h5>
                    <div className={styles.content}>
                        <Swiper
                            indicator={(total: number, current: number) => {
                                // 创建用于存储指示器的数组
                                const items: React.ReactElement[] = [];
                                // 根据指示器数量生成指示器元素
                                for (let i = 0; i < total; i++) {
                                    items.push(
                                        <span
                                            key={i}
                                            className={classNames({
                                                [styles.active]: i === current,
                                            })}
                                        ></span>
                                    );
                                }
                                // 返回指示器
                                return <div className={styles.indicator}>{items}</div>;
                            }}
                        >
                            {data.data.consultationInfo.map((item) => (
                                <Swiper.Item key={item.orderId}>
                                    <div className={styles.item}>
                                        <div className={styles.avatar}>
                                            <img src={item.avatar} alt="" />
                                        </div>
                                        <div className={styles.info}>
                                            <div className={styles.doctor}>
                                                <span>{item.name}</span>
                                                <i>
                                                    {item.depName} | {item.positionalTitles}
                                                </i>
                                            </div>
                                            <div className={styles.hospital}>
                                                <span>{item.gradeName}</span>
                                                <i>{item.hospitalName}</i>
                                            </div>
                                        </div>
                                        <div className={styles.consult}>进入咨询</div>
                                    </div>
                                </Swiper.Item>
                            ))}
                        </Swiper>

                    </div>
                </div>
                <div className={styles.order}>
                    <div className={styles.top}>
                        <h5>药品订单</h5>
                        <a href="#">
                            全部订单 <RightOutline />
                        </a>
                    </div>
                    <ul className={styles.list}>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/paid.svg").default}
                                    alt="待付款"
                                />
                                {data.data.orderInfo.paidNumber > 0 && (
                                    <em>{data.data.orderInfo.paidNumber}</em>
                                )}
                            </div>
                            <span>待付款</span>
                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/shipped.svg").default}
                                    alt="待发货"
                                />
                                {data.data.orderInfo.receivedNumber > 0 && (
                                    <em>{data.data.orderInfo.receivedNumber}</em>
                                )}
                            </div>
                            <span>待发货</span>

                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/received.svg").default}
                                    alt="待收货"
                                />
                                {data.data.orderInfo.shippedNumber > 0 && (
                                    <em>{data.data.orderInfo.shippedNumber}</em>
                                )}
                            </div>
                            <span>待收货</span>
                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/finished.svg").default}
                                    alt="已完成"
                                />
                                {data.data.orderInfo.finishedNumber > 0 && (
                                    <em>{data.data.orderInfo.finishedNumber}</em>
                                )}
                            </div>
                            <span>已完成</span>
                        </li>
                    </ul>
                </div>
                <div className={styles.shortcuts}>
                    <h5 className={styles.title}>快捷工具</h5>
                    <ul className={styles.list}>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/tool-01.svg").default}
                                    alt="我的问诊"
                                />
                            </div>
                            <span>我的问诊</span>
                            <RightOutline />
                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/tool-02.svg").default}
                                    alt="我的处方"
                                />
                            </div>
                            <span>我的处方</span>
                            <RightOutline />
                        </li>
                        <li onClick={() => navigate("/patient")}>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/tool-03.svg").default}
                                    alt="家庭档案"
                                />
                            </div>
                            <span>家庭档案</span>
                            <RightOutline />
                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/tool-04.svg").default}
                                    alt="地址管理"
                                />
                            </div>
                            <span>地址管理</span>
                            <RightOutline />
                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/tool-05.svg").default}
                                    alt="我的评价"
                                />
                            </div>
                            <span>我的评价</span>
                            <RightOutline />
                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/tool-06.svg").default}
                                    alt="官方客服"
                                />
                            </div>
                            <span>官方客服</span>
                            <RightOutline />
                        </li>
                        <li>
                            <div className={styles.imgContainer}>
                                <img
                                    src={require("@icons/user/tool-07.svg").default}
                                    alt="设置"
                                />
                            </div>
                            <span>设置</span>
                            <RightOutline />
                        </li>
                    </ul>
                </div>
                <Logout />
            </div>)}

        </>
    );
}